<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href='/webjars/bootstrap/css/bootstrap.min.css' rel='stylesheet'>

    <meta charset="UTF-8">
    <title>Roles</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/admin-page-title :: admin-page-title ('Roles Administrative Page')"></div>

<br><br>

<div class="container" id="main">
    <form v-on:submit.prevent="postRole">
        <div class="card mb-auto">
            <div aria-controls="roleForm" aria-expanded="false" class="card-header" data-target="#roleForm"
                 data-toggle="collapse" id="formHeader" style="cursor: pointer">
                <div class="float-left">New/Edit Role</div>
                <div class="float-right">+</div>
            </div>
            <div class="card card-body collapse" id="roleForm">
                <div class="form-group row">
                    <label for="roleName" class="col-sm-4 col-form-label">Role Name</label>
                    <input id="roleId" type="hidden" v-model="role_id">
                    <input id="roleName" class="form-control col-sm-8" placeholder="Role Name" type="text"
                           v-model="role_name"/>
                </div>
                <div class="form-group row">
                    <div class="col col-sm-4"></div>
                    <input class="btn btn-primary col col-sm-8" type="submit" value="Save">
                </div>
            </div>
        </div>
    </form>

    <br><br>

    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>Role ID</th>
            <th>Role Name</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="role in roles">
            <td>{{ role.id }}</td>
            <td>{{ role.name }}</td>
            <td>
                <button class="btn btn-primary" v-on:click="editRole(role)">Edit</button>
                <button class="btn btn-danger" v-on:click="deleteRole(role)">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Vue imports -->
<script src="webjars/vue/vue.min.js"></script>
<script src="webjars/axios/dist/axios.min.js"></script>
<!-- Actual Vue.js script -->
<script>
    var app = new Vue({
        el: '#main',
        data() {
            return {
                roles: null,
                role_id: '',
                role_name: '',
            }
        },
        mounted(){
            this.getRoles();
        },
        methods: {
            getRoles: function () {
                axios
                    .get("/api/v1/roles")
                    .then(response => (this.roles = response.data))
            },
            postRole: function (event) {
                // Creating
                if (this.role_id == '' || this.role_id == null) {
                    axios
                        .post("/api/v1/roles", {
                            "name": this.role_name,
                        })
                        .then(savedRole => {
                            this.roles.push(savedRole.data);
                            this.role_name = '';
                            this.role_id = '';
                        })
                } else { // Updating
                    axios
                        .post("/api/v1/roles", {
                            "id": this.role_id,
                            "name": this.role_name,
                        })
                        .then(savedRole => {
                            this.getRoles();
                            this.role_name = '';
                            this.role_id = '';
                        })
                }
            },
            editRole: function (role) {
                this.role_id = role.id;
                this.role_name = role.name;
                document.getElementById('roleForm')
                    .setAttribute("class", document.getElementById('roleForm').getAttribute("class") + " show");
            },
            deleteRole: async function (role) {
                await axios
                    .delete("/api/v1/roles/" + role.id);
                this.getRoles();
            }
        },
    })
</script>

<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
